<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/page-bg1.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' leftIconColor="#ffffff" bgColor="transparent" @leftClick="navBack"
				:title="info.title">
				<view slot="center" class="navTitle">
					{{info.title}}
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30 pd30">
				<view class="testComplete" v-if="info">
					<view class="tp">
						<view class="ico">
							<image src="@/static/images/icon-complete.svg" mode="aspectFit"></image>
						</view>
						<view class="tit">
							{{!info.status?'测评完成':'全部测评完成'}}
						</view>
						<!-- <view class="time">
							你的作答时间为:{{info.time | timeFormate('mm分ss秒')}}
						</view> -->
					</view>
					<view class="btns">
						<view class="btn" v-if="!info.status">
							继续测评
						</view>
						<view class="btn" @tap="viewReport" v-else>
							查看报告
						</view>
						<navigator url="/subpage/test/test" open-type="redirect" class="btn gray">
							返回测评列表
						</navigator>
					</view>
				</view>
				<view class="testList s2" v-if="list.length>0">
					<view class="item" v-for="(i,index) in list" :key="index">
						<view class="img">
							<image :src="i.picUrl" mode="aspectFill"></image>
						</view>
						<view class="txt">
							<view class="it">
								{{i.name}}
							</view>
							<view class="ip">
								{{i.description}}
							</view>
						</view>
						<view class="btns">
							<view class="btn" @tap="openTest(i.id)">
								继续测评
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				testId: '',
				info: '',
				list:[],
				evaluationId: '',
				nextQuestionId: '',
			}
		},
		methods: {
			viewReport() {
				uni.navigateTo({
					url:'/subpage/report/report?id=' + this.info.id
				})

			},
			openTest(id) {
				uni.redirectTo({
					url: `/subpage/test/projectDetail?id=${id}&evaluationId=${this.info.evaluationId}`
				})
			},
			getInfo() {
				var that = this;
				if (!that.testId) {
					return
				};
				
				
				that.$api.reportInfo({
					id:that.testId
				}, res => {
					if (res.code == 200) {
						that.info = res.data
						that.list=[]
						res.data.questionList.some(item=>{
							if(!item.isFinish){
								that.list.push(item)
							}
						})
					}
				})
				
			}
		},
		onLoad(e) {
			this.testId = e.id
			if (e.nextQuestionId) {

				this.nextQuestionId = e.nextQuestionId
				this.evaluationId = e.evaluationId
			}
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.testList {
		&.s2 {
			.item {
				padding: 20rpx;
				background: #fff;

				&:last-child {
					margin-bottom: 0;
				}

				.img {
					width: 160rpx;
					height: 160rpx;
				}

				.it {
					color: #4d5765;
				}

				.ip {
					color: #7a7e89;
				}

				.btns {
					flex: 0 0 auto;

					.btn {
						width: 140rpx;
						font-size: 24rpx;
						line-height: 60rpx;
						border-radius: 60rpx;
						text-align: center;
						color: #fff;
						background: #fe9c29;
					}
				}
			}
		}
	}

	.navTitle {
		color: #fff;
	}

	.pb50 {
		padding-bottom: 50rpx;
	}

	.testComplete {
		padding: 40rpx;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
		background: #fff;

		.tp {
			padding: 90rpx 0 120rpx;

			.ico {
				width: 90rpx;
				height: 90rpx;
				margin: 0 auto 30rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.tit {
				text-align: center;
				font-size: 48rpx;
				font-weight: bold;
				line-height: 1;
				color: #4d5765;
				margin-bottom: 20rpx;
			}

			.time {
				text-align: center;
				font-size: 28rpx;
				color: #4d5765;
			}
		}

		.btns {
			.btn {
				text-align: center;
				line-height: 90rpx;
				height: 90rpx;
				outline: none !important;
				background: #6b9ddb;
				color: #fff;
				border: none;
				border-radius: 90rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				font-size: 28rpx;

				&:before,
				&:after {
					display: none;
				}

				&.gray {
					background: #e1ebf8;
					color: #4d5765;
				}
			}
		}
	}
</style>